---
type: tutorial
title: Écrivez votre première ligne en Astro
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Faites vos premières modifications sur la page d'accueil de votre projet de tutoriel
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Faites votre première modification sur votre nouveau site web
</PreCheck>

## Modifiez votre page d'accueil

<Steps>
1. Dans votre éditeur de code, naviguez dans le volet Explorer vers `src/pages/index.astro` et cliquez dessus pour ouvrir le contenu du fichier dans un onglet modifiable.

    Le contenu de votre fichier `index.astro` devrait ressembler à ceci :

    ```astro title="src/pages/index.astro"
    ---
    ---

    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} >
        <title>Astro</title>
      </head>
      <body>
        <h1>Astro</h1>
      </body>
    </html>
    ```

2. Modifiez le contenu de votre page `<body>`.

    Tapez dans l'éditeur pour changer le texte du titre de votre page et enregistrez la modification.

    ```astro title="src/pages/index.astro" del={2} ins={3}
    <body>
      <h1>Astro</h1>
      <h1>Mon site Astro</h1>
    </body>
    ```

3. Vérifiez l'aperçu dans le navigateur et vous devriez voir que le contenu de votre page est mis à jour avec le nouveau texte.
</Steps>

Félicitations ! Vous êtes maintenant un développeur Astro !

Le reste de cette unité vous préparera pour la gestion de version et la publication de votre site web que vous pourrez montrer à tous.



<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux apporter des modifications et les voir dans le navigateur.
- [ ] Je suis un développeur Astro !
</Checklist>
</Box>
